<template>
  <v-card>
    <v-footer
      :padless="padless"
      style="background-image: linear-gradient(to right, #87ceeb, #00bfff)"
    >
      <v-card
        flat
        tile
        width="100%"
        class="red lighten-1 text-center"
        style="background-image: linear-gradient(to right, #87ceeb, #00bfff)"
      >
        <v-card-text>
          <v-btn
            v-for="icon in icons"
            :key="icon"
            class="mx-4"
            icon
            style="
              background-image: linear-gradient(to right, #87ceeb, #00bfff);
              color: #3265ba;
            "
          >
            <v-icon size="24px">
              {{ icon }}
            </v-icon>
          </v-btn>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </v-card-text>
      </v-card>
    </v-footer>
  </v-card>
</template>
<script setup>
let icons = ['mdi-home', 'mdi-email', 'mdi-calendar', 'mdi-delete']
let padless = false
</script>
